<script setup>
import {onMounted, ref} from 'vue'
import {getCurrentActivities } from '../../../api/activity.js'

const activities = ref([
])

const getActivities = async () => {
  let res = await getCurrentActivities();
  activities.value = res;
}

const getStatusText = (status) => {
  const statusMap = {
    0: '未开始',
    1: '进行中',
    2: '已结束'
  }
  return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'success',
    2: 'warning'
  }
  return typeMap[status] || ''
}

onMounted(() => {
  getActivities()
})

</script>

<template>
  <div class="activities-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>活动记录表</span>
        </div>
      </template>

      <el-table :data="activities" border style="width: 100%">
        <el-table-column prop="name" label="活动名称" width="180"/>
        <el-table-column label="活动时间" width="380">
          <template #default="scope">
            {{ scope.row.startTime }} - {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column label="活动状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<style scoped>
.activities-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
